<template>
	<view class="lab-booking-form">
		<CsCard title="基本信息">
			<u--form labelPosition="left" :model="baseForm" ref="form1"
				labelWidth="80" :labelStyle="labelStyle">
				<u-form-item label="申请人:" borderBottom ref="item1">
					<u--input placeholder="请输入申请人" border="none"
						v-model="baseForm.userName" inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="实验类型:" borderBottom
					 ref="item2">
					<u--input v-model="baseForm.type" placeholder="请输入实验类型"
						disabledColor="#ffffff"  border="none"
						inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="使用院系:" borderBottom
					@click="showCollege = true" ref="item3">
					<u--input v-model="baseForm.college" disabled
						disabledColor="#ffffff" placeholder="选择" border="none"
						inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="使用班级:" ref="item4" @click="showClass = true">
					<u--input v-model="baseForm.className" disabled
						disabledColor="#ffffff" placeholder="选择" border="none"
						inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
<!-- 			<u-action-sheet :show="showType" :actions="labTypeList" title="请选择实验类型"
				@close="showType = false" @select="typeSelect">
			</u-action-sheet> -->
			<u-action-sheet :show="showCollege" :actions="collegeList" 
				title="请选择院系" @close="showCollege = false"
				@select="collegeSelect">
			</u-action-sheet>
			<u-action-sheet :show="showClass" :actions="classList" title="请选择班级"
				@close="showClass = false" @select="classSelect">
			</u-action-sheet>
		</CsCard>
		<CsCard title="座位">
			<view class="seatBox" >
				<text v-for="item in seatData" :key="item.id" class="seat" :class="[getSeatStyle(item.isSelect, item.status)]">{{ item.seatCode }}</text>
			</view>
		</CsCard>
		<CsCard title="预约时间">
			<u--form labelPosition="left" :model="timeForm" ref="form2"
				labelWidth="80" :labelStyle="labelStyle">
				<u-form-item label="开始时间:" ref="item5" borderBottom
					@click="showStart = true">
					<u--input v-model="timeForm.startTime" border="none"
						disabled disabledColor="#ffffff" placeholder="选择"
						inputAlign="right">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="结束时间:" ref="item6" @click="showEnd = true">
					<u--input v-model="timeForm.endTime" border="none" disabled
						disabledColor="#ffffff" placeholder="选择"
						inputAlign="right">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
			<u-datetime-picker ref="datetimePicker1" :show="showStart"
				v-model="timeValue1" mode="datetime" @cancel="showStart=false"
				@confirm="confirmStart">
			</u-datetime-picker>
			<u-datetime-picker ref="datetimePicker2" :show="showEnd"
				v-model="timeValue2" mode="datetime" @cancel="showEnd=false"
				@confirm="confirmEnd">
			</u-datetime-picker>
		</CsCard>
		<CsCard title="其他" class="otherForm">
			<u--form labelPosition="left"  :model="timeForm" ref="form3"
				:labelStyle="labelStyle" labelWidth="80">
				<u-form-item label="课程名称:" ref="item7" borderBottom>
					<u--input placeholder="输入课程名称" border="none"
						v-model="otherForm.className" inputAlign="right"></u--input>
				</u-form-item>

				<u-form-item label="指导老师:" ref="item7" borderBottom>
					<u-input placeholder="选择指导老师" border="none"
						v-model="otherForm.instructor"inputAlign="right">
						<template slot="suffix">
							<u-button size="mini" type="primary" color="#377FEC" text="选择"></u-button>
						</template></u-input>
				</u-form-item>
	
				<view class="remarkFormItem">
					<u-form-item  label="预约备注:" ref="item7">
						<template slot="right">
							<u--textarea v-model="otherForm.remark" height="56">
							</u--textarea>
						</template>
						
					</u-form-item>
				</view>

			</u--form>
		</CsCard>
		<view class="submitBtn">
					<u-button size="small" type="primary" color="#377FEC" text="提交"></u-button>
		</view>

	</view>
</template>

<script>
	import dateFormat from "@/utils/date-format.js"
	
	import { queryAllCollege } from '@/service/college.js'
	
	export default {
		data() {
			return {
				baseForm: {
					room: '',
					college: '',
					class: '',
					name: ''
				},
				timeForm: {
					startTime: '',
					endTime: ''
				},
				otherForm: {
					action: '',
					address: '',
					remark: ''
				},
				timeValue1: Number(new Date()),
				timeValue2: Number(new Date()),
				labelStyle: {
					color: '#999999'
				},
				// showType: false,
				showCollege: false,
				showClass: false,
				showStart: false,
				showEnd: false,
				labTypeList: [{
						name: '类型1',
					},
					{
						name: '类型2',
					},
					{
						name: '类型3',
					},
				],
				collegeList: [],
				classList: [{
						name: '332班',
					},
					{
						name: '323班',
					},
					{
						name: '324班',
					},
				],
				seatData: [
					{
						id: 1,
						seatCode: '01',
						isSelect: true,
						status: 1
					},
					{
						id: 2,
						seatCode: '02',
						isSelect: false,
						status: 1
					},
					{
						id: 3,
						seatCode: '03',
						isSelect: false,
						status: 0
					},
					{
						id: 4,
						seatCode: '04',
						isSelect: false,
						status: 0
					},
					{
						id: 5,
						seatCode: '05',
						isSelect: true,
						status: 1
					},
					{
						id: 6,
						seatCode: '06',
						isSelect: false,
						status: 1
					},
					{
						id: 7,
						seatCode: '07',
						isSelect: true,
						status: 1
					},
					{
						id: 8,
						seatCode: '08',
						isSelect: true,
						status: 1
					},
					{
						id: 9,
						seatCode: '09',
						isSelect: true,
						status: 1
					},
					{
						id: 10,
						seatCode: '10',
						isSelect: true,
						status: 1
					},
				]
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker1.setFormatter(this.formatter)
			this.$refs.datetimePicker2.setFormatter(this.formatter)
		},
		onLoad(option) {
			console.log(option.id)
			this.queryAllCollege()
		},
		watch: {
			timeValue1(newVal) {
				this.timeForm.startTime = dateFormat(newVal)
			},
			timeValue2(newVal) {
				this.timeForm.endTime = dateFormat(newVal)
			}
		},
		methods: {
			// 查询所有学院
			async queryAllCollege() {
				const { code, data, msg } = await queryAllCollege()
				console.log({ code, data, msg })
				if (code === 0 && data) {
					this.collegeList = data
				}
			},
			// typeSelect(e) {
			// 	this.baseForm.type = e.name
			// },
			// 选择学院
			collegeSelect(e) {
				console.log(e)
				this.baseForm.college = e.name
			},
			classSelect(e) {
				this.baseForm.className = e.name
			},
			confirmStart() {
				console.log('开始')
				this.showStart = false
				if (this.timeForm.startTime === '') {
					this.timeForm.startTime = dateFormat(this.timeValue1)
				}

			},
			confirmEnd() {
				console.log('结束')
				this.showEnd = false
				if (this.timeForm.endTime === '') {
					this.timeForm.endTime = dateFormat(this.timeValue2)
				}

			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			getSeatStyle(isSelect, status) {
				if (status === 1) {
					if (isSelect) {
						return 'seat_select'
					}
				} else {
					return 'seat_disable'
				}
			}
		}
	}
</script>

<style lang="scss">
	.lab-booking-form {
		min-height: 100vh;
		background-color: #F6F6F6;
		padding: 20rpx 0;
	}

	.u-button {
		width: 92rpx !important;
		height: 40rpx;

	
		.u-button__text {
			font-size: 28rpx !important;
		}
	
	
	}

.seatBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	
	.seat {
		display: inline-block;
		width: 84rpx;
		height: 36rpx;
		background-color: #fff;
		border: 2rpx solid #D8DCE1;
		border-radius: 8rpx;
		font-size: 24rpx;
		text-align: center;
		margin: 16rpx 18rpx 0 18rpx;
	}
	
	.seat_select {
		background-color: #FFEEDB;
		border-color: #FFB26E;
		color: #FF9436;
	}
	
	.seat_disable {
		background-color: #F3F3F3;
		color: #C6C6C6;
		border: none;
	}
}



.submitBtn {
	.u-button {
		width: 196px !important;
		height: 36px;
	
		.u-button__text {
			font-size: 14px !important;
		}
	
	}
}

.u-textarea {
	width: 516rpx;
	right: 0;
}

.otherForm {
	.u-form {
		.remarkFormItem {
			.u-form-item {
				padding-top: 60rpx;
			}
			
			.u-form-item__body__left__content {
				top: -130rpx;
				left: 0;
			}
		}
	}
}


</style>
